<template>
    <a-spin :spinning="confirmLoading">
      <j-form-container :disabled="formDisabled">
        <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
          <a-row>
            <!-- <a-col :span="24">
              <a-form-model-item label="名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="name">
                <a-input v-model="model.name" placeholder="请输入名称"></a-input>
              </a-form-model-item>
            </a-col> -->
            <a-col :span="12">
              <a-form-model-item label="归属项目" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="projectId">
                <a-select :options="levelOneOptions" v-model="model.projectId " placeholder="请选择归属项目" @change="changeLevelOne"></a-select>
                <!-- <span style="color: red; font-size: 16px">请选择所属项目,此项为必填</span> -->
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="设备类型" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="departId">
                <a-select :options="levelTwoOptions" v-model="model.departId" placeholder="请选择设备类型"  @change="changeLevelTwo"></a-select>
             
              </a-form-model-item>
            </a-col>
            <a-col :span="12" style="margin-right: 550px;">
              <a-form-model-item label="设备名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="departId">
                <a-input :options="levelThreeOptions" v-model="model.userId  "  placeholder="请输入设备名称" ></a-input>
              
              </a-form-model-item>
            </a-col>
           
           <h2 style="font-weight: bold;">租借信息录入</h2>
            <a-col :span="12">
              <a-form-model-item label="租借日期" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="">
              <j-date v-model="model.tickectDate"></j-date>

              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="租借单号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="address">
                <a-input v-model="model.address" placeholder="请输入租借单号"></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="租借单位" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="">
                <a-select :options="levelThreeOptions" v-model="model.userId  " placeholder="请选择类型"></a-select>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="租借人" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="">
                <a-input  v-model="model.address  " placeholder="请输入租借人"></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="租借位置" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="">
                <a-select :options="levelThreeOptions" v-model="model.userId  " placeholder="请选择设备位置"></a-select>
              </a-form-model-item>
            </a-col>
          
          </a-row>
        </a-form-model>
      </j-form-container>
    </a-spin>
  </template>
  
  <script>
  import { httpAction, getAction } from '@/api/manage'
  import { validateDuplicateValue } from '@/utils/util'
  
  export default {
    name: 'WtWarehouseForm',
    components: {},
    props: {
      //表单禁用
      disabled: {
        type: Boolean,
        default: false,
        required: false,
      },
    },
    data() {
      return {
        model: {
          departId: '',
          userId:'',
          projectId:''
        },
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        confirmLoading: false,
        validatorRules: { projectId:[{ required: true, message: '请选择项目!' }],},
        // housenameList: [],
        // housenameData: [],
        treeData1: [],
        // treeData2: [],
        // treeData3: [],
        levelOneOptions: [],
        // levelTwoOptions: [],
        // levelThreeOptions: [],
  
        url: {
          list: '/sys/user/list',
          add: '/materials/wtWarehouse/add',
          edit: '/materials/wtWarehouse/edit',
          queryById: '/materials/wtWarehouse/queryById',
        },
      }
    },
    computed: {
      formDisabled() {
        return this.disabled
      },
    },
    created() {
      //备份model原始值
      this.modelDefault = JSON.parse(JSON.stringify(this.model))
      this.loadTree()
    },
    methods: {
      add() {
        this.edit(this.modelDefault)
      },
      edit(record) {
        this.model = Object.assign({}, record)
        this.visible = true
        
        // getAction(this.url.list).then((res) => {
        //   if (res.success) {
        //     console.log(res)
        //     this.housenameData = []
        //     let treeList1 = res.result.records
        //     for (let a = 0; a < treeList1.length; a++) {
        //       let temp = treeList1[a]
        //       temp.isLeaf = temp.leaf
        //       this.housenameData.push(temp)
        //     }
        //     this.housenameList = [...this.housenameData].map((v) => {
        //       return {
        //         ...v,
        //         value: v.id,
        //         label: v.realname,
        //       }
        //     })
        
        //   }
  
        // })
        // getAction(`/sys/sysDepart/getDepartListByParentId?parentId=${this.model.projectId}`).then(res => {
        //   if (res.success) {
    
        //     this.treeData2 = []
        //     let treeList2 = res.result
        //     for (let a = 0; a < treeList2.length; a++) {
        //       let temp = treeList2[a]
        //       temp.isLeaf = temp.leaf
        //       this.treeData2.push(temp)
        //     }
           
        //     this.levelTwoOptions = [...this.treeData2].map((v) => {
        //       return {
        //         ...v,
        //         value: v.id,
        //         label: v.departName,
        //       }
        //     })
        //   }
        // })
        // getAction(`/sys/sysDepart/getUsersByDepartId?id=${this.model.departId}`).then((res)=>{
        //            if (res.success) {
    
        //         this.treeData3 = []
        //         let treeList3 = res.result
        //         for (let a = 0; a < treeList3.length; a++) {
        //           let temp = treeList3[a]
        //           temp.isLeaf = temp.leaf
        //           this.treeData3.push(temp)
        //         }
               
        //         this.levelThreeOptions = [...this.treeData3].map((v) => {
        //           return {
        //             ...v,
        //             value: v.id,
        //             label: v.realname,
        //           }
        //         })
  
        //       }
        //     })
      },
      // changeLevelOne(val) {
      //   // this.clearForm()
      //   this.model.departId = this.model.userId = ''
      //   this.levelThreeOptions = []
      // //  console.log('gfedw',val);
     
      //  this.getList('parentId', val)
      // },
      // changeLevelTwo(val) {
      //   // this.clearForm()
      //   this.model.userId = ''
      //   this.getList1('id', val)
       
      // },
      // getList(category, id) {
      //   getAction(`/sys/sysDepart/getDepartListByParentId?${category}=${id}`).then(res => {
      //     if (res.success) {
    
      //       this.treeData2 = []
      //       let treeList2 = res.result
      //       for (let a = 0; a < treeList2.length; a++) {
      //         let temp = treeList2[a]
      //         temp.isLeaf = temp.leaf
      //         this.treeData2.push(temp)
      //       }
      //      console.log('fdew',this.treeData2);
      //       this.levelTwoOptions = [...this.treeData2].map((v) => {
      //         return {
      //           ...v,
      //           value: v.id,
      //           label: v.departName,
      //         }
      //       })
      //     }
      //   })
      
        
      // },
      // getList1(category, id) {
       
      //   getAction(`/sys/sysDepart/getUsersByDepartId?${category}=${id}`).then((res)=>{
      //              if (res.success) {
    
      //           this.treeData3 = []
      //           let treeList3 = res.result
      //           for (let a = 0; a < treeList3.length; a++) {
      //             let temp = treeList3[a]
      //             temp.isLeaf = temp.leaf
      //             this.treeData3.push(temp)
      //           }
               
      //           this.levelThreeOptions = [...this.treeData3].map((v) => {
      //             return {
      //               ...v,
      //               value: v.id,
      //               label: v.realname,
      //             }
      //           })
  
      //         }
      //       })
      // },
      // clearForm(){
      //   this.model.departId=this.model.depid=this.model.userId  = ''
      // },
      loadTree() {
        getAction(`/sys/sysDepart/getDepartByOrgType?orgType=1`).then((res) => {
              if (res.success) {
    
                this.treeData1 = []
                let treeList1 = res.result
                for (let a = 0; a < treeList1.length; a++) {
                  let temp = treeList1[a]
                  temp.isLeaf = temp.leaf
                  this.treeData1.push(temp)
                }
               
                this.levelOneOptions = [...this.treeData1].map((v) => {
                  return {
                    ...v,
                    value: v.id,
                    label: v.departName,
                  }
                })
                
                
              }
            })
            
      },
      submitForm() {
        const that = this
        // 触发表单验证
        this.$refs.form.validate((valid) => {
          if (valid) {
            that.confirmLoading = true
            let httpurl = ''
            let method = ''
            if (!this.model.id) {
              httpurl += this.url.add
              method = 'post'
            } else {
              httpurl += this.url.edit
              method = 'put'
            }
            // this.model.departId=this.model.id
            console.log('dewq',this.model);
            httpAction(httpurl, this.model, method)
              .then((res) => {
                if (res.success) {
                  that.$message.success(res.message)
                  that.$emit('ok')
                } else {
                  that.$message.warning(res.message)
                }
              })
              .finally(() => {
                that.confirmLoading = false
              })
          }
        })
      },
    },
  }
  </script>